<template>
	<view>
		<view class="top_box">
			<view class="search-box">
				<text class="icon iconfont icon-sousuo"></text>
				<input v-model="formData.keys" type="text" placeholder="请输入商品/商铺名称" @confirm="edit_keys" />
			</view>
			<view class="tab-box">
				<view @click="edit_type(1)" :class="formData.type==1?'tab-item active':'tab-item'">
					商品
				</view>
				<view @click="edit_type(2)" :class="formData.type==2?'tab-item active':'tab-item'">
					商铺
				</view>
			</view>
		</view>
		<!-- 商品 -->
		<view class="" v-if="formData.type==1">
			<view class="shop_body2">
				<view class="shop_body_t_item" :class="index % 2 == 0?'ml20 mr20':' mr20'"
					v-for="(item,index) in listData" :key="index" @click="gotoList(item.product_id)">
					<image :src="item.product_image" mode=""></image>
					<view class="shop_body_t_item_info">
						<view class="shop_body_t_item_info_title f26">{{item.product_name}}</view>
						<view class="shop_body_t_item_info_others f24 gray9 mt">
							<view class="shop_body_t_item_info_others_sales">累计成交：{{item.product_sales}}笔
							</view>
						</view>
						<view class="shop_body_t_item_info_price">
							<view class="f20 redF6">¥<text class="f32">{{item.product_price}}</text>
							</view>
						</view>

					</view>
				</view>

			</view>
			<view class="d-c-c p30" v-if="listData.length==0">
				<text class="iconfont icon-wushuju"></text>
				<text class="cont">亲，暂无相关数据哦</text>
			</view>
		</view>
		<!-- 店铺 -->
		<view class="" v-if="formData.type==2">
			<view class="fff_box" v-for="(item,index) in ShopList" :key="index" @click="goShop(item)">
				<view class="store_logo">
					<image :src="item.logos?item.logos:require('@/static/noimg.png')" mode="aspectFill">
					</image>
				</view>
				<view class="right">
					<view class="main">
						<view class="store_name">
							{{item.name}}
						</view>
						<view class="frsjnr">
							<view class="fraction">
								{{item.server_score}}分
							</view>
							<view class="distance">
								<!-- {{item.km.toFixed(2)}}km -->
							</view>
						</view>
						<view class="cate_show">
							主营业务：{{item.category_name}}
						</view>
						<view class="onTime">
							营业时间：{{item.work_time?item.work_time:'全天营业'}}
						</view>
					</view>
					<view class="product-list">
						<view class="product-item" v-for="(row,i) in item.productList" :key="i"
							@tap.stop="goPriduct(row)">
							<view class="product-image">
								<image :src="row.image[0].file_path" mode="aspectFill"></image>
							</view>
							<view class="product-name">
								{{row.product_name}}
							</view>
							<view class="product-price">
								￥{{row.product_price}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="d-c-c p30" v-if="ShopList.length==0">
				<text class="iconfont icon-wushuju"></text>
				<text class="cont">亲，暂无相关数据哦</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					type: 1,
					keys: '',
					page: 1,
				},
				last_page: 0,
				listData: [],
				ShopList: [],
			}
		},
		onLoad() {
			// this.getData();
		},
		onPullDownRefresh() {
			this.formData.page = 1
			this.listData = []
			this.ShopList = []
			this.getData()
		},
		onReachBottom() {
			if (this.last_page > this.formData.page) {
				this.formData.page++
				this.getData()
			}
		},
		methods: {
			edit_type(e) {
				this.formData.type = e
				this.formData.page = 1
				this.listData = []
				this.ShopList = []
				// this.getData()
			},
			edit_keys() {
				this.formData.page = 1
				this.listData = []
				this.ShopList = []
				this.getData()
			},
			getData() {
				let self = this;
				let params = self.formData
				self._post('index/seachs', params, function(res) {
					if (self.formData.type == 1) {
						self.listData = self.listData.concat(res.data.list.data)
						self.last_page = res.data.list.last_page
					}
					if (self.formData.type == 2) {
						self.ShopList = self.ShopList.concat(res.data.list.data)
						self.last_page = res.data.list.last_page
					}
					uni.stopPullDownRefresh()
				});
			},
			goShop(item) {
				uni.navigateTo({
					url: '/pages/shop/shop?shop_supplier_id=' + item.shop_supplier_id
				})
			},
			goPriduct(item) {
				uni.navigateTo({
					url: '/pages/product/detail/detail?product_id=' + item.product_id
				})
			},
			/*跳转产品列表*/
			gotoList(e) {
				let url = 'pages/product/detail/detail?product_id=' + e
				this.gotoPage(url);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fff_box {
		margin: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		display: flex;

		.store_logo {
			width: 160rpx;
			height: 160rpx;
			border-radius: 16rpx;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 16rpx;
			}
		}

		.right {
			width: 500rpx;
		}

		.main {
			width: 100%;
			padding-left: 20rpx;
			box-sizing: border-box;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #eeeeee;

			.store_name {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
			}

			.frsjnr {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 20rpx;
				line-height: 38rpx;

				.fraction {
					font-size: 22rpx;
					color: #1BAE61;
				}
			}

			.cate_show {
				font-size: 22rpx;
				line-height: 38rpx;
				color: #777;
			}

			.onTime {
				margin-top: 10rpx;
				background-color: rgba(27, 174, 97, 0.10);
				color: rgba(27, 174, 97, 1);
				font-size: 20rpx;
				width: 240rpx;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
			}
		}

		.product-list {
			margin-top: 20rpx;
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			overflow: auto;

			&::-webkit-scrollbar {
				width: 0 !important
			}

			.product-item {
				margin-right: 20rpx;

				.product-image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 16rpx;

					image {
						width: 150rpx;
						height: 150rpx;
						border-radius: 16rpx;
					}
				}

			}

			.product-name {
				width: 150rpx;
				text-align: center;
				font-size: 24rpx;
				color: #333333;
				font-weight: bold;
				margin-top: 4rpx;
				white-space: nowrap;
				/* 确保文本在一行内显示 */
				overflow: hidden;
				/* 隐藏超出容器的文本 */
				text-overflow: ellipsis;
				/* 使用省略符号表示文本被截断 */
			}

			.product-price {
				text-align: center;
				color: #ED4549;
				font-size: 20rpx;
				margin-top: 4rpx;
			}
		}
	}

	.shop_body2 {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		background-color: #f2f2f2;
	}

	.shop_body_t_item {
		width: 345rpx;
		// margin: 0 2.5%;
		margin-bottom: 20rpx;
		height: 520rpx;
		overflow: hidden;
		background-color: white;
		border-radius: 12rpx;
	}

	.shop_body_t_item image {
		width: 100%;
		height: 337.5rpx;
		background-color: rgba(0, 0, 0, 0.1);
	}

	.shop_body_t_item_info {
		// height: 182.5rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.shop_body_t_item_info_title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		word-wrap: break-word;
		word-break: break-all;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.shop_body_t_item_info_price {
		display: flex;
		align-items: flex-end;

	}

	.shop_body_t_item_info_others {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8rpx;
	}

	.shop_body_t_item_info_others_activity {}

	.shop_body_t_item_info_others_sales {
		color: #999999;
	}

	.top_box {
		width: 100%;
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9;

		.search-box {
			width: 100%;
			display: flex;
			align-items: center;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #efefef;
			border-radius: 40rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			input {
				flex: 1;
				padding-left: 20rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				box-sizing: border-box;
			}
		}

		.tab-box {
			display: flex;
			align-items: center;

			.tab-item {
				width: 50%;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				color: #666;
				font-size: 30rpx;
			}

			.active {
				color: #1bae61;
				position: relative;

				&::after {
					content: '';
					width: 30rpx;
					height: 4rpx;
					background-color: #1bae61;
					position: absolute;
					left: 0;
					right: 0;
					margin: 0 auto;
					bottom: 8rpx;
				}
			}



		}
	}
</style>